<template>
	<view class="redemption">
		<block v-if="show">
			<view class="redemption-list" v-if="goodsList.length">
				<view class="redemption-item" v-for="(data,index) in goodsList" :key="index" @click="goProInfo(data.goods_id)">
					<view class="goods-image"><image :src="data.image"></image></view>
					<view class="goods-info">
						<view class="goods-name">{{data.goods_name}}</view>
						<view class="goods-price">
							<text class="price">￥<text>{{data.retail_price}}</text></text>
							<text class="tag" v-if="data.goods_type==3 || data.goods_type==8">特价换购</text>
						</view>
						<view class="goods-market-price">
							<view class="price">原价：<text>￥{{data.market_price}}</text></view>
							<view class="car" @click.stop="showSku(data)"><u-icon name="shopping-cart" color="#F59359" size="38"></u-icon></view>
						</view>
					</view>
				</view>
			</view>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
			<pt-nomore v-if="goodsList.length && noMore"></pt-nomore>
			<block v-if="!goodsList.length && noMore">
				<pt-nothing 
					text="暂无换购商品"
					:fixed="true"
					bgColor="#FFF"
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png">
				</pt-nothing>
			</block>
			
			<!-- sku -->
			<uni-popup type="bottom" ref="sku" class="sku-pop" @change="skuPopChange">
				<pt-sku
					:skuInfo="skuInfo"
					@closeSku="closeSku"
					:actionType="actionType"
					@confirmAction="confirmAction(arguments)"
					:skuList="skuList"
					:selectedArr="selectedArr"
					:subIndex="subIndex"
					:isMerchant="false"
					:shopItemInfo="shopItemInfo"
					:isSale="1"
					:expireTime="0"
					:spu="spu">
				</pt-sku>
			</uni-popup>
			<!-- sku -->
		</block>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				shelf_id: '',
				page: 0,
				goodsList: [],
				skuInfo: {
					img: '',
					number: 1,
					price: ''
				},
				sku: [],
				subIndex: [],
				selectedArr: [],
				shopItemInfo: {}, //存放要和选中的值进行匹配的数据
				skuAllList: [],
				skuList: [],
				actionType: 'addCar',
				spu: false,
				isLoading: false,
				noMore: false
			};
		},
		onLoad(options) {
			this.shelf_id = options.shelf_id
			this.init()
		},
		onReachBottom() {
			if(!this.noMore){
				this.page++
				this.isLoading = true
				this.init()
			}
		},
		methods: {
			init(){
				this.$u.api.GetShelfGoods({shelf_id: this.shelf_id,page: this.page}).then(res => {
					this.show = true
					this.isLoading = false
					if(res.datas.goods.length){
						res.datas.goods.forEach(item => {
							this.goodsList.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			goProInfo(goods_id){
				this.addFoot('购物车-换购商品-商品详情',goods_id)
				getApp().goProInfo(goods_id)
			},
			showSku(data){
				this.productInfo = data
				this.sku = data.sku_list
				let priceArr = [],
						priceInterval = 0
				
				this.sku.forEach(item => {
					priceArr.push(item.retail_price)
				})
				
				if(Math.min.apply(null, priceArr)==Math.max.apply(null, priceArr)){
					priceInterval = Math.min.apply(null, priceArr)
				}else{
					priceInterval = Math.min.apply(null, priceArr) + '~' + Math.max.apply(null, priceArr)
				}
				this.skuInfo = {
					img: data.image,
					number: 1,
					price: priceInterval
				}
				this.getSku()
				this.$refs.sku.open()
			},
			closeSku(e){
				this.$refs.sku.close()
			},
			skuPopChange(e){
				if(!e.show){
					this.subIndex = []
					this.selectedArr = []
				}
			},
			getSku(){
				if(this.sku.length < 5){
					this.sku.forEach(item => {
						this.skuAllList.push({
							sku_id: item.sku_id,
							sku_sn: item.sku_id,
							img: item.img,
							goods_id: item.goods_id,
							coefficient_num: item.coefficient_num,
							retail_price: item.retail_price,
							self_price: item.self_price,
							sku: item.color + '/' + item.lining + '/' + item.size
						})
					})
					this.skuList = [{
						name: '规格',
						list: []
					}]
					this.sku.forEach(item => {
						this.skuList[0].list.push(item.color+'/'+ item.lining + '/'+item.size)
					})
					this.spu = true
				}else{
					this.sku.forEach(item => {
						this.skuAllList.push({
							sku_id: item.sku_id,
							sku_sn: item.sku_id,
							img: item.img,
							goods_id: item.goods_id,
							coefficient_num: item.coefficient_num,
							retail_price: item.retail_price,
							self_price: item.self_price,
							sku: item.color + ',' + item.lining + ',' + item.size
						})
					})
					this.skuList = []
					this.skuList.push({
						name: '颜色',
						list: this.getKeyValue(this.sku, 'color')
					})
					this.skuList.push({
						name: '材质',
						list: this.getKeyValue(this.sku, 'lining')
					})
					this.skuList.push({
						name: '尺寸',
						list: this.getKeyValue(this.sku, 'size')
					})
				}
				let shopItemInfo = {}
				for (var i in this.skuAllList) {
				    //修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
						this.$set(shopItemInfo,this.skuAllList[i].sku,this.skuAllList[i])
				}
				this.shopItemInfo = JSON.stringify(shopItemInfo)
				// 重组sku选择列表
			},
			// sku 方法
			// 获取字段值返回二位数组
			getKeyValue(arr, key) {
				let name = key
				return this.unique(arr.map(obj => {
					return {
						id: obj.sku_id,
						name: obj[name],
						price: obj.retail_price,
						img: obj.img
					}
				}))
			},
			// 去重
			unique(arr) {
				let temp = {},
					result = [];
				arr.map((item, index) => {
					if (!temp[item.name]) {
						result.push(item);
						temp[item.name] = true
					}
				})
				return result
			},
			confirmAction(e){
				this.selectedArr = e[0]
				this.skuInfo = e[1]
				this.subIndex = e[2]
				this.actionType = e[3]
				let data = {
					// #ifdef MP-WEIXIN
					client: 1,
					// #endif
					// #ifdef APP-PLUS
					client: 2,
					// #endif
					// #ifdef H5
					client: 3,
					// #endif
					store_id: this.productInfo.store_id,
					type: !this.isMerchant?1:4,
					sku_id: this.skuInfo.sku_id,
					num: this.skuInfo.number,
					goods_id: this.productInfo.goods_id,
					space_ids: 0,
					is_show: this.actionType==='addCar'?1:2,
					is_all: 1
				}
				switch (this.actionType){
					case 'addCar':
						this.$u.api.AddStoreGoodsCart(data).then(res => {
							uni.showToast({
								icon: 'none',
								title: '加入购物车成功'
							})
							this.$refs.sku.close()
							this.selectedArr = []
							this.subIndex = []
							if(uni.getStorageSync('userInfo')){
								this.addFoot('购物车-换购商品-加入购物车',this.productInfo.goods_id)
							}
							setTimeout(() => {
								uni.navigateBack()
							},1500)
						})
						break;
					case 'buy':
						this.$u.api.AddStoreGoodsCart(data).then(res => {
							uni.navigateTo({
								animationDuration: 500,
								url: '/pages/car/confirmOrder/confirmOrder?ids=' + res.datas,
								success: () => {
									this.$refs.sku.close()
									this.subIndex = []
									this.selectedArr = []
								}
							})
						})
						break;
				}
			},
			addFoot(where,goods_id){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: goods_id,
					store_goods_id: 0,
					is_new: 1
				})
			},
		}
	}
</script>

<style lang="scss">
	.redemption{
		padding: 60rpx 0 0;
		.redemption-list{
			padding-bottom: 60rpx;
		}
		.redemption-item{
			display: flex;
			align-items: flex-start;
			padding: 0 30rpx;
			margin-bottom: 60rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.goods-image{
				image{
					width: 190rpx;
					height: 190rpx;
					border-radius: 4rpx;
					border: solid 1px #F7F7F7;
				}
			}
			.goods-info{
				flex: 1;
				min-width: 0;
				margin-left: 30rpx;
				.goods-name{
					font-size: 28rpx;
					color: #141414;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					margin-top: 10rpx;
				}
				.goods-price{
					margin: 25rpx 0;
					.price{
						font-weight: bold;
						font-size: 24rpx;
						text{
							font-size: 32rpx;
						}
					}
					.tag{
						margin-left: 10rpx;
						display: inline-block;
						vertical-align: top;
						height: 40rpx;
						line-height: 40rpx;
						background-color: #FEF7F2;
						color: #F59359;
						font-size: 24rpx;
						padding: 0 10rpx;
						border-radius: 4rpx;
					}
				}
				.goods-market-price{
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price{
						font-size: 22rpx;
						color: #909090;
						text{
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}
</style>